// 内边距 and 外边距
@for $i from 1 through 100 {
  .p-#{$i} {
    padding: 1px * $i;
  }
  .px-#{$i} {
    padding-left: 1px * $i;
    padding-right: 1px * $i;
  }
  .py-#{$i} {
    padding-top: 1px * $i;
    padding-bottom: 1px * $i;
  }
  .pl-#{$i} {
    padding-left: 1px * $i;
  }
  .pt-#{$i} {
    padding-top: 1px * $i;
  }
  .pr-#{$i} {
    padding-right: 1px * $i;
  }
  .pb-#{$i} {
    padding-bottom: 1px * $i;
  }

  .m-#{$i} {
    margin: 1px * $i;
  }
  .mx-#{$i} {
    margin-left: 1px * $i;
    margin-right: 1px * $i;
  }
  .my-#{$i} {
    margin-top: 1px * $i;
    padding-bottom: 1px * $i;
  }
  .ml-#{$i} {
    margin-left: 1px * $i;
  }
  .mt-#{$i} {
    margin-top: 1px * $i;
  }
  .mr-#{$i} {
    margin-right: 1px * $i;
  }
  .mb-#{$i} {
    margin-bottom: 1px * $i;
  }
}
// 外边距 负数
@for $i from 1 through 100 {
  .-m-#{$i} {
    margin: -1px * $i;
  }
  .-mx-#{$i} {
    margin-left: -1px * $i;
    margin-right: -1px * $i;
  }
  .-my-#{$i} {
    margin-top: -1px * $i;
    padding-bottom: -1px * $i;
  }
  .-ml-#{$i} {
    margin-left: -1px * $i;
  }
  .-mt-#{$i} {
    margin-top: -1px * $i;
  }
  .-mr-#{$i} {
    margin-right: -1px * $i;
  }
  .-mb-#{$i} {
    margin-bottom: -1px * $i;
  }
}